<template>
	<view class="home">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item v-for="item in swiper" :key="item.id">
				<image :src="item.image_src" mode=""></image>
			</swiper-item>
		</swiper>
		
		<!-- 导航区域 -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemCli(item.path)">
				<view :class="item.icno"></view>
				<text>
					{{item.title}}
				</text>
			</view>
			
			
					
		</view>
		
		
		<!-- 推荐商品 -->
		<view class="hot_goods">
		<view class="tit">推荐商品</view>
		<goodslist :goods="goods"></goodslist>
		</view>
	</view>
</template>

<script>
	
	// import {myRequest,getWidth} from "../../util/api.js"
	import goodslist from "../../components/goodslist/goodlist.vue"
	export default {
		components:{
			goodslist
		},
		
		data() {
			return {
				swiper:[],
				goods:[],
				src:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
				navs:[
					{
					icno:'iconfont icon-ziyuan'	,
					title:'我的超市',
					path:'/pages/goods/goods'
					},
					{
					icno:'iconfont icon-guanyuwomen'	,
					title:'联系我们',
					path:'/pages/contact/contact'
					},
					{
					icno:'iconfont icon-tupian'	,
					title:'商品分类',
					path:'/pages/pics/pics'
					},
					{
					icno:'iconfont icon-shipin'	,
					title:'学习视频',
					path:'/pages/videos/videos'
					},
				]
			}
		},
		onLoad() {
			this.getSwiper();
			this.getGoods('sell','1');
			
		},
		methods: {
			 async getSwiper(){
				// uni.request({
				// 	url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
				// 	method:'GET',
				// 	success:res=>{
				// 	// console.log(res)
				// 	if(res.statusCode !== 200){
				// 		return uni.showToast({
				// 			title:'请求失败'
				// 		})	
				// 	} 
				// 	console.log(res.statusCode)
				// 	}	
				// })
				
				
				 const res=  await this.$myRequest({	
					url:'/home/swiperdata',
					method:'GET'
				}).then((res)=>{
					console.log(res)
					this.swiper = res.data.message
					// console.log(this.swiper)
				})			
			},
			
			async getGoods(type,page){
				const res = await this.$myRequest2({
					url:'/home/data',
					data:{
						type,page
					}
				}).then((res)=>{
					// console.log('!!!!!!!!!!!!!')
					// console.log(res)
					this.goods = res.data.data.list
					// console.log(this.goods[0].show)
				})
			},
			navItemCli(url){
				uni.navigateTo({
					url,
					success() {
						console.log(url)
					}
				})
				
			}

		}
	}
</script>

<style lang="scss">
.home{
	width: 750rpx;
	height: 380rpx;
	
	// img{     ！！！！！！！！！写法二！！！！！！
	// 	height: 100%;
	// 	width: 100%;
	// }
}

.home image{
	width: 100%;
	height: 100%;
	
}

.nav{
	display: flex;
	margin-top: 6rpx;	
}
.nav_item{
	flex: 25%;
	text-align: center;
	font-size: 30rpx;
	
	view{
		width: 120rpx;
		height: 120rpx;
		background-color: #b50e03;
		border-radius: 60rpx;
		margin: 10rpx auto;
		font-size: 50rpx;
		line-height:120rpx;
		color: white;
		
	}	
	
}
.hot_goods{
		background-color: #eee;
		overflow: hidden;
		margin-top: 20rpx;
		.tit{
			height: 100rpx;
			line-height: 100rpx;
			letter-spacing: 20rpx;
			text-align: center;
			color: $base-color;
			background-color: #FFFFFF;
			margin: 10rpx 0;
		}
	}
	
	
</style>
